<template>
<div id="app">
  <!-- <keep-alive include="home">
    <router-view :percentage="percentage"/>
  </keep-alive> -->
  <loading v-show="page===0" :percentage="percentage" @setPage="setPage"/>
  <Home v-show="page===1" @setPage="setPage" />
  <page3 v-show="page===2" @setPage="setPage" :show="page===2"/>
  <page4 v-show="page===3" @setPage="setPage" :show="page===3"/>
  <page5 v-show="page===4" @setPage="setPage" :show="page===4"/>
  <end v-show="page===5" @setPage="setPage" :visible="page===5"/>
</div>
</template>
<script>
const RATE = window.screen.height/window.screen.width
import loading from 'views/loading'
import Home from 'views/Home'
import page3 from 'views/page3'
import page4 from 'views/page4'
import page5 from 'views/page5'
import end from 'views/end'
import { mapGetters } from 'vuex'
export default {
  name: 'app',
  components:{
    loading,
    Home,
    page3,
    page4,
    page5,
    end
  },
  data(){
    return {
      imgArr : [
        require('@/assets/1.gif'),
        require('@/assets/2.gif'),
        require('@/assets/b1.jpg'),
        require('@/assets/h4.png'),
        require('@/assets/h5.png'),
        require('@/assets/h8.png'),
        require('@/assets/m3.png'),
        require('@/assets/t3.png'),
        require('@/assets/bn4.png'),
        require('@/assets/t4_1.png'),
        require('@/assets/t4_2.png'),
        require('@/assets/t4_3.png'),
        require('@/assets/t4_4.png'),
        require('@/assets/t5_1.png'),
        require('@/assets/t5_2.png'),
        require('@/assets/t5_3.png'),
        require('@/assets/t5_4.png'),
        require('@/assets/t5_5.png'),
        require('@/assets/t5_6.png'),
        require('@/assets/t5_7.png'),
        require('@/assets/t5_8.png'),
        require('@/assets/t5_9.png'),
        require('@/assets/t5_10.png'),
        require('@/assets/bn6.png'),
        require('@/assets/t6_1.png'),
        require('@/assets/t6_2.png'),
        require('@/assets/t6_3.png'),
        require('@/assets/t6_4.png'),
        require('@/assets/t6_5.png'),
        require('@/assets/t7_1.png'),
        require('@/assets/t7_2.png'),
        require('@/assets/t8_1.png'),
        require('@/assets/t8_2.png'),
        require('@/assets/t8_3.png'),
        require('@/assets/t8_4.png'),
        require('@/assets/t8_5.png'),
        require('@/assets/t8_6.png'),
        require('@/assets/t8_7.png'),
        require('@/assets/t8_8.png'),
        require('@/assets/t8_9.png'),
        require('@/assets/t9_1.png'),
        require('@/assets/t9_2.png'),
        require('@/assets/t9_3.png'),
        require('@/assets/t9_4.png'),
        require('@/assets/t9_5.png'),
        require('@/assets/b3.png'),
        require('@/assets/f3.png'),
        require('@/assets/f4.png'),
        require('@/assets/h11.png'),
        require('@/assets/h14.png'),
        require('@/assets/h19.png'),
        require('@/assets/h21.png'),
        require('@/assets/t10.png'),
        require('@/assets/c1_1.png'),
        require('@/assets/c1_2.png'),
        require('@/assets/c1_3.png'),
        require('@/assets/c1_4.png'),
        require('@/assets/c1_5.png'),
        require('@/assets/c1_6.png'),
        require('@/assets/c2_1.png'),
        require('@/assets/c2_2.png'),
        require('@/assets/c3_1.png'),
        require('@/assets/c3_2.png'),
        require('@/assets/c3_3.png'),
        require('@/assets/c4_1.png'),
        require('@/assets/c4_2.png'),
        require('@/assets/c4_3.png'),
        require('@/assets/c4_4.png'),
        require('@/assets/c5_1.png'),
        require('@/assets/c5_2.png'),
        require('@/assets/c5_3.png'),
        require('@/assets/c5_4.png'),
        require('@/assets/c5_5.png'),
        require('@/assets/c5_6.png'),
        require('@/assets/c5_7.png'),
        require('@/assets/c5_8.png'),
        require('@/assets/c5_9.png'),
        require('@/assets/c6_1.png'),
        require('@/assets/c7_1.gif'),
        require('@/assets/c7_2.png'),
        require('@/assets/c8_1.png'),
        require('@/assets/c9_1.png'),
        require('@/assets/c9_2.png'),
        require('@/assets/c10_1.png'),
        require('@/assets/c10_2.png'),
        require('@/assets/c10_3.png'),
        require('@/assets/c10_4.png'),
        require('@/assets/c10_5.png'),
        require('@/assets/c10_6.png'),
        require('@/assets/c10_7.png'),
        require('@/assets/c11_1.png'),
        require('@/assets/c11_2.png'),
        require('@/assets/c11_3.png'),
        require('@/assets/act.png'),
        require('@/assets/unact.png'),
        require('@/assets/c11_4.png'),
        require('@/assets/c11_5.png'),
        require('@/assets/c11_6.png'),
        require('@/assets/c12_1.png'),
        require('@/assets/c12_2.png'),
        require('@/assets/c13_1.png'),
        require('@/assets/ir.png'),
        require('@/assets/c14_1.png'),
        require('@/assets/c14_2.png'),
        require('@/assets/c14_3.png'),
        require('@/assets/c14_4.png'),
        require('@/assets/c14_5.png'),
        require('@/assets/c14_6.png'),
        require('@/assets/c14_7.png'),
        require('@/assets/c14_8.png'),
        require('@/assets/c14_9.png'),
        require('@/assets/c14_10.png'),
        require('@/assets/b3.png'),
        require('@/assets/h23.png'),
        require('@/assets/h24.png'),
        require('@/assets/t5.png'),
        require('@/assets/b1_1.png'),
        require('@/assets/b1_2.png'),
        require('@/assets/b2_1.png'),
        require('@/assets/b2_2.png'),
        require('@/assets/close.png'),
        require('@/assets/img0.png'),
        require('@/assets/img1.jpg'),
        require('@/assets/img2.png'),
        require('@/assets/img3.png'),
        require('@/assets/img0r.jpg'),
        require('@/assets/img1r.jpg'),
        require('@/assets/img2r.jpg'),
        require('@/assets/img3r.jpg'),
        require('@/assets/b26.jpg'),
        require('@/assets/e1.png'),
        require('@/assets/e2.png'),
        require('@/assets/e3.png'),
        require('@/assets/e4.png'),

      ],
      imgArrPad:[
        require('@/assets/ipad/1.gif'),
        require('@/assets/ipad/2.gif'),
        require('@/assets/b1.jpg'),
        require('@/assets/h4.png'),
        require('@/assets/h5.png'),
        require('@/assets/h8.png'),
        require('@/assets/ipad/m3.png'),
        require('@/assets/t3.png'),
        require('@/assets/bn4.png'),
        require('@/assets/ipad/t4_1.png'),
        require('@/assets/ipad/t4_2.png'),
        require('@/assets/t4_3.png'),
        require('@/assets/ipad/t4_4.png'),
        require('@/assets/t5_1.png'),
        require('@/assets/t5_2.png'),
        require('@/assets/t5_3.png'),
        require('@/assets/t5_4.png'),
        require('@/assets/t5_5.png'),
        require('@/assets/t5_6.png'),
        require('@/assets/t5_7.png'),
        require('@/assets/t5_8.png'),
        require('@/assets/t5_9.png'),
        require('@/assets/t5_10.png'),
        require('@/assets/ipad/bn6.png'),
        require('@/assets/t6_1.png'),
        require('@/assets/t6_2.png'),
        require('@/assets/t6_3.png'),
        require('@/assets/t6_4.png'),
        require('@/assets/t6_5.png'),
        require('@/assets/t7_1.png'),
        require('@/assets/t7_2.png'),
        require('@/assets/t8_1.png'),
        require('@/assets/t8_2.png'),
        require('@/assets/t8_3.png'),
        require('@/assets/ipad/t8_4.png'),
        require('@/assets/t8_5.png'),
        require('@/assets/ipad/t8_6.png'),
        require('@/assets/t8_7.png'),
        require('@/assets/ipad/t8_8.png'),
        require('@/assets/t8_9.png'),
        require('@/assets/t9_1.png'),
        require('@/assets/t9_2.png'),
        require('@/assets/t9_3.png'),
        require('@/assets/t9_4.png'),
        require('@/assets/ipad/t9_5.png'),
        require('@/assets/b3.png'),
        require('@/assets/f3.png'),
        require('@/assets/f4.png'),
        require('@/assets/h11.png'),
        require('@/assets/h14.png'),
        require('@/assets/h19.png'),
        require('@/assets/h21.png'),
        require('@/assets/t10.png'),
        require('@/assets/ipad/c1_1.png'),
        require('@/assets/ipad/c1_2.png'),
        require('@/assets/ipad/c1_3.png'),
        require('@/assets/ipad/c1_4.png'),
        require('@/assets/ipad/c1_5.png'),
        require('@/assets/ipad/c1_6.png'),
        require('@/assets/c2_1.png'),
        require('@/assets/c2_2.png'),
        require('@/assets/c3_1.png'),
        require('@/assets/c3_2.png'),
        require('@/assets/c3_3.png'),
        require('@/assets/c4_1.png'),
        require('@/assets/c4_2.png'),
        require('@/assets/c4_3.png'),
        require('@/assets/c4_4.png'),
        require('@/assets/c5_1.png'),
        require('@/assets/ipad/c5_2.png'),
        require('@/assets/ipad/c5_3.png'),
        require('@/assets/c5_4.png'),
        require('@/assets/ipad/c5_5.png'),
        require('@/assets/ipad/c5_6.png'),
        require('@/assets/c5_7.png'),
        require('@/assets/ipad/c5_8.png'),
        require('@/assets/ipad/c5_9.png'),
        require('@/assets/c6_1.png'),
        require('@/assets/ipad/c7_1.gif'),
        require('@/assets/c7_2.png'),
        require('@/assets/c8_1.png'),
        require('@/assets/c9_1.png'),
        require('@/assets/c9_2.png'),
        require('@/assets/ipad/c10_1.png'),
        require('@/assets/ipad/c10_2.png'),
        require('@/assets/ipad/c10_3.png'),
        require('@/assets/ipad/c10_4.png'),
        require('@/assets/ipad/c10_5.png'),
        require('@/assets/ipad/c10_6.png'),
        require('@/assets/ipad/c10_7.png'),
        require('@/assets/c11_1.png'),
        require('@/assets/ipad/c11_2.png'),
        require('@/assets/ipad/c11_3.png'),
        require('@/assets/act.png'),
        require('@/assets/unact.png'),
        require('@/assets/c11_4.png'),
        require('@/assets/c11_5.png'),
        require('@/assets/c11_6.png'),
        require('@/assets/c12_1.png'),
        require('@/assets/c12_2.png'),
        require('@/assets/c13_1.png'),
        require('@/assets/ipad/ir.png'),
        require('@/assets/ipad/c14_1.png'),
        require('@/assets/ipad/c14_2.png'),
        require('@/assets/ipad/c14_3.png'),
        require('@/assets/ipad/c14_4.png'),
        require('@/assets/ipad/c14_5.png'),
        require('@/assets/ipad/c14_6.png'),
        require('@/assets/ipad/c14_7.png'),
        require('@/assets/ipad/c14_8.png'),
        require('@/assets/ipad/c14_9.png'),
        require('@/assets/ipad/c14_10.png'),
        require('@/assets/b3.png'),
        require('@/assets/h23.png'),
        require('@/assets/h24.png'),
        require('@/assets/t5.png'),
        require('@/assets/ipad/b1_1.png'),
        require('@/assets/ipad/b1_2.png'),
        require('@/assets/ipad/b2_1.png'),
        require('@/assets/ipad/b2_2.png'),
        require('@/assets/close.png'),
        require('@/assets/img0.png'),
        require('@/assets/img1.jpg'),
        require('@/assets/img2.png'),
        require('@/assets/img3.png'),
        require('@/assets/img0r.jpg'),
        require('@/assets/img1r.jpg'),
        require('@/assets/img2r.jpg'),
        require('@/assets/img3r.jpg'),
        require('@/assets/ipad/b26.jpg'),
        require('@/assets/ipad/e1.png'),
        require('@/assets/ipad/e2.png'),
        require('@/assets/e3.png'),
        require('@/assets/ipad/e4.png'),
      ],
      percentage:0,
      page:0,
    }
  },
  created() {
    window.addEventListener('resize',this.resize())
    this.page = 0
    let i = 0
    let arr = RATE<1.5?this.imgArrPad:this.imgArr
    arr.forEach(item=>{
      let img = new Image()
      img.src = item
      img.onload=()=>{
        if(img.complete){
          i++
          this.percentage = Math.floor(((i+1)/arr.length)*100)
        }
      }
    })
  },
  beforeDestroy(){
    window.removeEventListener('resize',this.resize())
  },
  methods:{
    setPage(page){
      this.page = page
    },
    resize(){
      if (RATE<1.5) {
        document.getElementsByTagName('html')[0].style.height = `${window.innerHeight}px`
      }
    }
  }
}
</script>
<style lang="stylus">
#app
  font-family 'Avenir', Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #2c3e50
  height: 100vh;

.page{
  width: 100vw;
  height: 100vh;
}
@media only screen and (device-aspect-ratio:3/4),
only screen and (device-aspect-ratio:512/683)
  html
    height: 985px
    overflow: hidden;
    position: fixed;
    bottom: 0;
  body
    height: 100%;
    #app
      height: 100%;
      .page
        height: 100%;
</style>
